<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-01-12 22:16:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-24 14:12:13
 -->
<template>
  <div>
    <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
      <el-input
        ref="input"
        v-model="insideVal"
        @focus="onFocus"
        @keydown.native="onkeydown"
      >
        <i slot="suffix" class="el-icon-arrow-down" />
      </el-input>
      <div v-if="isShowDrop" class="optionsWrapper">
        <ul>
          <li v-for="(item, index) in options" :key="item.value">
            <a :class="{current: currentIndex === index}" @click="() => {btnOptionClick(item)}">{{ getGetItemName(item) }}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    options: {
      type: Array,
      default: () => { return [] }
    },
    value: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      insideVal: null,
      currentIndex: 0,
      isShowDrop: false
    }
  },
  watch: {
    value: {
      handler(val) {
        const obj = this.getCurrentUnitObj(val)
        this.$emit('change', obj)
        this.insideVal = obj.name
      },
      immediate: true
    }
  },
  created() {
    const options = this.options || []
    const currentId = this.value
    const currentIndex = options.findIndex(item => { return item.id === currentId })
    this.currentIndex = currentIndex
  },
  destroyed() {
  },
  methods: {
    btnOptionClick(row) {
      this.handleSelectOption(row)
    },
    handleSelectOption(row) {
      const { id } = row
      this.$emit('input', id)
      this.isShowDrop = false
    },
    getBaseMultiObj(options) {
      return options.find(item => { return item.isBase === '1' })
    },
    getDefaultMulti(options) {
      const obj = options.length > 0 ? options[0] : {}
      return obj['name']
    },
    getCurrentUnitObj(value) {
      const options = this.options || []
      const obj = options.find(item => { return item.id === value })
      return obj || {}
    },
    getGetItemName(item) {
      if (item.isBase === '1') return item.name
      const baseObj = this.getBaseMultiObj(this.options) || {}
      return `${item.name} = (${item.multi}${baseObj.name})`
    },
    onMouseEnter(e) {
      this.isShowDrop = true
    },
    onMouseLeave(e) {
      this.isShowDrop = false
    },
    onFocus() {
      this.isShowDrop = true
    },
    onkeydown(e) {
      const { keyCode } = e
      if (keyCode === 38) {
        let targetIndex = this.currentIndex - 1
        const maxIndex = this.options.length - 1
        if (targetIndex < 0) {
          targetIndex = maxIndex
        }
        this.currentIndex = targetIndex
      }
      if (keyCode === 40) {
        let targetIndex = this.currentIndex + 1
        const maxIndex = this.options.length - 1
        if (targetIndex > maxIndex) {
          targetIndex = 0
        }
        this.currentIndex = targetIndex
      }
      if (keyCode === 13) {
        const currentIndex = this.currentIndex
        const currentRow = this.options[currentIndex]
        this.handleSelectOption(currentRow)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.optionsWrapper{
  position:absolute; z-index: 100;
  border:solid 2px #3198ff;
  width:100%;
  background: #fff;
  ul{
    padding: 0; margin: 0;
  }
  a.current{
    background: #eeeeee;
  }
  a, a:link{
    display: block;
    padding:5px 0 5px 5px;
    border-bottom: solid 1px #eeeeee
  }
  a:hover{
    background: #eeeeee;
  }
}
</style>
